<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="width: 100%; height: 40px; line-height: 40px"
        >
          <!-- 左侧区域 -->
          <el-col :span="20">
            <span>{{ headers.name }}</span>
          </el-col>
          <TreeTools :treenode="headers" :is-bn="false" />
          <!-- 右侧区域 -->
        </el-row>
        <!-- 树形结构 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
          draggable
        >
          <span slot-scope="{ data }" class="custom-tree-node">
            <span>{{ data.name }}</span>
            <TreeTools :treenode="data" :isok="true" />
          </span>
        </el-tree>
      </el-card>
      <AddDept />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartmentsAPI } from '@/api/treetools'
import { tranlistTotreeData } from '@/utils'
export default {
  components: {
    TreeTools, AddDept
  },
  data() {
    return {
      departs: [ // 存放树形数组数据
      ],
      headers: { // 存放头部的信息
      },
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.getDepartmentsFn()
  },
  mounted() {
    this.$bus.$on('removeFn', () => {
      // 重新渲染我们的数据
      this.getDepartmentsFn()
    })
    this.$bus.$on('updataFn', () => {
      this.getDepartmentsFn()
    })
  },
  methods: {
    // 封装获取部门信息的方法
    async getDepartmentsFn() {
      const res = await getDepartmentsAPI()
      this.headers = {
        name: res.companyName,
        manager: '负责人',
        id: ''
      }
      this.departs = tranlistTotreeData(res.depts, '')
    }
  }
}
</script>

<style scoped>
.box-card {
  font-size: 14px;
  padding: 30px 140px;
  height: 100%;
}

.item {
  padding: 18px 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

